<template>
  <div class="lianxi_main">
    <m-header modile-title="练习3" go-back="true"></m-header>
    <group title="default">
      <!--单选-->
      <radio :options="radio001" @on-change="change2"></radio>
      <!--地区选择器-->
      <!--@on-hide="logHide" @on-show="logShow"-->
      <x-address :title="title" v-model="value" :list="addressData" @on-shadow-change="onShadowChange"
                 placeholder="请选择地址"></x-address>
      <!--输入框-->
      <x-input title="只能输入2333：" :is-type="be2333" placeholder="请输入"></x-input>
    </group>
    <button @click="carryImage" style="width: 200px;height: 40px;background: #42bd56;border-radius: 10px;outline: none;color: white;font-size: 15px">
      点击查看
    </button>
  </div>
</template>

<script>
  import mHeader from '../../../../components/header'
  import {Toast} from 'mint-ui'
  import {Group, Radio, XAddress, ChinaAddressV4Data, XButton, Cell, Value2nameFilter as value2name, XInput} from 'vux'

  export default {
    data() {
      return {
        radio001: ['China', 'Japan'], // 单选值
        title: '地址选择', // 地址选择器的标题
        value: [],
        addressData: ChinaAddressV4Data, // 地址选择器的数据 vux默认自带的
        be2333: function (value) {
          return {
            valid: value === '2333', // 判断输入的值是否是设置的值
            msg: 'Must be 2333'
          }
        },
        imageUrl:'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1445830749,1757055224&fm=175&app=25&f=JPEG?w=640&h=357&s=7E383EC7631061D680E68D780300D03B'
      }
    },
    methods: {
      change2(value, label) {
        console.log('结果:', value, label)
      },
      onShadowChange(ids, names) {
        console.log(ids, names)
      },
      // logHide (str) {
      //   // console.log('on-hide', str)
      // },
      // logShow (str) {
      //   // console.log('on-show')
      // }
      carryImage(){
        // console.log(this.imageUrl)
        this.$router.push({name:'imgeCheck',params:{url:this.imageUrl}})
      }
    },
    components: {
      mHeader,
      Group,
      Radio,
      XAddress,
      XButton,
      Cell,
      XInput
    }
  }
</script>
<style lang="scss">
  .lianxi_main {
    width: 100%;
    padding-top: 60px;
    background: #fff;
    .custom-primary-red {
      border-radius: 99px !important;
      border-color: #CE3C39 !important;
      color: #CE3C39 !important;
      &:active {
        border-color: rgba(206, 60, 57, 0.6) !important;
        color: rgba(206, 60, 57, 0.6) !important;
        background-color: transparent;
      }
    }
  }
</style>
